// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.header-nav-mobile {
  width: 100%;
  font-size: @font-size--title-small;
  position: relative;

  @media @desktop {
    display: none;
  }

  &__menu {
    position: absolute;
    z-index: @z-index--simple-menu;
    background-color: @osu-colour-d5;
    top: 100%;
    right: 0;
    left: 0;
    list-style: none;
    display: grid;
    padding: 0;
    margin: 0 -@gutter-v2; // cancels out the one in header-v4__row
  }

  &__toggle {
    .link-plain();
    .link-white();
    padding: 10px 0;
    display: block;
    width: max-content;
    max-width: 100%;
    position: relative;

    &::before {
      content: "";
      z-index: @z-index--simple-menu-hover-object;
      width: 100%;
      height: 4px;
      background-color: @osu-colour-h1;
      bottom: -2px;
      left: 0;
      position: absolute;
      display: block;
      border-radius: 10000px;
    }
  }

  &__toggle-icon {
    position: absolute;
    left: 100%;
    height: 100%;
    top: 0;
    align-items: center;
    display: flex;
    padding-left: 10px;
    font-size: 0.8em;

    .js-click-menu--active > & {
      transform: rotateX(0.5turn);
    }
  }

  &__item {
    .default-gutter-v2();
    .link-plain();
    .link-white();
    padding-top: 10px;
    padding-bottom: $padding-top;
    display: block;

    .link-hover({
      background-color: @osu-colour-d3;
    });
  }
}
